<div class="st-myplan-detail">
  <div class="st-myplan-detail-title" >
    <span class="h5" (click)="backPreviouClick()">我的培训计划</span>
    <i class="fa fa-angle-right h4 pl-2 pr-2" style="cursor: default;"></i>
    <span class="h5">{{title}}</span>
  </div>
  <div class="start-exam">
    <button pButton style="background: #63DCAF; color: #fff;border: 0" type="button" icon="iconfont iconbaseline-play_circle_filled-24px" label="模拟考试" iconPos="right" class="ui-button-rounded"
            (click)="startTestPaper()"
    ></button>
  </div>
  <div class="content">
    <p-scrollPanel [style]="{width: '100%', height: '70vh'}">
      <div class="myplan-file ui-g-12">
        <div style="font-size: 16px; padding: 1vh 0">培训资料</div>
        <div class="item ui-g-12 ui-g-12" *ngFor="let item of fileContent" (click)="openFileClick(item)" [pTooltip]="item.whetherStudy === 1 ? '已完成' : '未完成'">
          <span>{{item?.resourceName}}</span>
          <span style="float: right"><i [ngStyle]="{color: item.whetherStudy === 1 ? 'green' : ''}" class="fa fa-check-circle"></i></span>
        </div>
      </div>
      <div class="myplan-video ui-g-12">
        <div class="p-2" style="font-size: 16px">培训视频</div>
        <div class="ui-g-4 ui-md-4" *ngFor="let item of videoContent">
          <div class="item"  [pTooltip]="item.whetherStudy === 1 ? '已完成' : '未完成'">
            <span style="float: right"><i [ngStyle]="{color: item.whetherStudy === 1 ? 'green' : ''}" class="fa fa-check-circle"></i></span>
            <br>
            <div style="width: 100%; height: 200px; position: relative;">
              <video style="width: 100%;" height="200" #video>
                <source [src]="item?.resourcePath" type="video/mp4" />
              </video>
              <div class="item-control" #btn>
                <button (click)="videoPlay(btn, video, item)"><i class="fa fa-play"></i></button>
              </div>
            </div>
            <div>
              <span>{{item.resourceName}}</span>
            </div>
          </div>
        </div>
      </div>
    </p-scrollPanel>

  </div>
  <p-dialog header="{{fileName}}" [(visible)]="openDialog" [style]="{width: '80vw', height: '98vh'}" [modal]="true" [closable]="true">
    <p-scrollPanel [style]="{width: '80vw', height: '98vh', position: 'relative', marginTop: '-60px'}">
      <iframe [src]="fileUrl" style="width: 80vw; height: 98vh"></iframe>
    </p-scrollPanel>
  </p-dialog>
</div>
